<script setup>
import { onMounted, reactive, ref } from "vue";
import { storeToRefs } from "pinia";
import useTaskStore from "@/pinia/modules/taskStore";
import BackTop from "@/components/backTop/backTop.vue";

const taskStore = useTaskStore();

const props = defineProps({
  status: {
    type: Number,
    required: true,
  },
});
const { pickupCounts, pickupList } = storeToRefs(taskStore);


const params = reactive({
  page: 1,
  pageSize: 10,
  status: props.status,
});

const triggered = ref(false);

const scrollTop = ref(0);

const top = ref(0);

const fetchPickupList = async () => {
  try {
    await taskStore.fetchPickupList(params);
  } catch (error) {
    uni.showToast({ title: error.message, duration: 2000, icon: "error" });
  }
};

const scrolltolower = () => {
  if (pickupList.value.length >= pickupCounts.value) return uni.showToast({ title: "没有更多待提货", duration: 2000, icon: "error" });
  fetchPickupList();
};

const refresherrefresh = async () => {
  triggered.value = true;
  params.page = 1;
  pickupList.value = [];
  await fetchPickupList();
  triggered.value = false;
};

const scroll = ({ detail }) => {
  scrollTop.value = detail.scrollTop;
};

onMounted(() => {
  fetchPickupList();
});

</script>

<template>
  <scroll-view class="scroll-view" refresher-enabled scroll-y scroll-with-animation :scroll-top="top" @scrolltolower="scrolltolower" @refresherrefresh="refresherrefresh" @scroll="scroll" :refresher-triggered="triggered">
    <view class="scroll-view-wrapper">
      <view class="task-card" v-for="(item) in pickupList" :key="item.id">
        <navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${item.id}`">
          <view class="header">
            <text class="no">任务编号:{{ item.transportTaskId }}</text>
            <text class="status">待提货</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ item.startAddress }}</view>
              <view class="line">{{ item.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ item.planDepartureTime }}</view>
          <navigator hover-class="none" :url="`/subpkg_task/pickup/index?id=${item.id}`" class="action">提货</navigator>
        </view>
      </view>
      <view v-if="!pickupList" class="task-blank">无待提货物</view>
    </view>
    <back-top :show="scrollTop>=700" @click="top=Math.random()"></back-top>
  </scroll-view>
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>
